<template>
    <div>
        <el-drawer :append-to-body="true" title="审批人设置" v-model="store.state.form.approverDrawer" direction="rtl"
            size="550px">
            <div class="demo-drawer__content">
                <el-radio-group v-model="formData.automaticType" class="ml-4">
                    <el-radio label="1" size="large">人工审批</el-radio>
                    <el-radio label="2" size="large">自动通过</el-radio>
                    <el-radio label="3" size="large">自动拒绝</el-radio>
                </el-radio-group>
            </div>
            <p class="shr top"></p>
            <div v-if="formData.automaticType==1" class="demo-drawer__content">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="设置审批人" name="first1">
                        <el-radio-group v-model="formData.members" class="ml-4">
                            <el-radio label="1" size="large">指定成员</el-radio>
<!--                            <el-radio label="2" size="large">发起人自选</el-radio>-->
<!--                            <el-radio label="3" size="large">连续多级主管</el-radio>-->
                            <el-radio label="4" size="large">部门主管</el-radio>
<!--                            <el-radio label="5" size="large">直属主管</el-radio>-->
<!--                            <el-radio label="6" size="large">表单内部门控件对应主管</el-radio>-->
<!--                            <el-radio label="7" size="large">表单内部门控件对应角色</el-radio>-->
                            <el-radio label="8" size="large">角色</el-radio>
<!--                            <el-radio label="9" size="large">发起人自己</el-radio>-->
                            <el-radio label="0" size="large">表单内的联系人</el-radio>
                        </el-radio-group>
                        <div v-if="formData.members=='1'">
                            <div class="alert-s">
                                <el-alert v-for="(item,index) in formData.addMembers" :title="item.name" type="success" @close="deleMember(item)" />
                            </div>
                            <el-button type="primary" size="default" :icon="Plus" @click="specifiedMember({positioning:'A'})">添加成员
                            </el-button><span class="ge">不能超过20人</span>
                        </div>
                        <div v-else-if="formData.members=='2'">
                            <el-select v-model="formData.oneself" class="m-2" placeholder="Select" size="default">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <p class="top">选择范围</p>
                            <div class="scope">
                                <el-select v-model="formData.scope" class="m-2" placeholder="Select" size="default" @change="formData.membersRange=[]">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <p class="ge"></p>
                                <el-button v-if="formData.scope=='1'" type="primary" size="default" :icon="Plus" @click="specifiedMember({positioning:'B'})">添加成员
                                </el-button>
                                <el-button v-if="formData.scope=='2'" type="primary" size="default" :icon="Plus" @click="specifiedMember({positioning:'C'})">添加角色
                                </el-button>
                            </div>
                            <div class="alert-s">
                                <el-alert v-for="(item,index) in formData.membersRange" :title="item.name" type="success" @close="deleMemberB(item)" />
                            </div>
                        </div>
                        <div class="tion" v-else-if="formData.members=='3'">
                            <p class="shr"></p>
                            <p class="top">审批终点</p>
                            <el-radio-group v-model="formData.examinationend" class="ml-4">
                                <el-radio label="1" size="large">指定角色（同时是主管线上的主管）<el-button v-show="formData.examinationend==1"
                                        type="primary" size="default" :icon="Plus"
                                        @click="specifiedMember({positioning:'D'})">添加成员</el-button>
                                </el-radio>
                                <div class="alert-s">
                                    <el-alert v-for="(item,index) in formData.continuous" :title="item.name" type="success" @close="deleMemberB(item)" />
                                </div>
                                <p style="display: block;">
                                    <el-checkbox v-model="formData.Upa" label="同时不超过发起人向上的" size="large" />
                                    <span class="ge"></span>
                                    <el-select v-model="formData.Uplevel" class="m-2" placeholder="Select" size="default" @change="formData.Upa=true">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </p>
                                <el-radio label="2" size="large">通讯录中的
                                    <el-select v-model="formData.address" class="m-2" placeholder="Select" size="default">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-radio>
                            </el-radio-group>
                        </div>
                        <div class="tion" v-else-if="formData.members=='4'">
                            <div class="scope">
                                <span>发起人的</span>
                                <p class="ge"></p>
                                <el-select v-model="formData.originatorout" class="m-2" placeholder="Select" size="default">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <el-checkbox v-model="formData.ASS" label="找不到主管时，由上级主管到审批" size="large" />
                        </div>
                        <div class="tion" v-else-if="formData.members=='5'">
                            <div class="scope">
                                <span>发起人的</span>
                                <p class="ge"></p>
                                <el-select v-model="formData.originatorout" class="m-2" placeholder="Select" size="default">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div>
                        <div class="tion" v-else-if="formData.members=='6'">
                            <div class="scope">
                                <el-select v-model="formData.department" style="width:150px" class="m-2" placeholder="Select"
                                    size="default">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <p>部门内的主管</p>
                                <el-select v-model="formData.role" style="width:150px" class="m-2" placeholder="Select"
                                    size="default">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div>
                        <div class="tion" v-else-if="formData.members==='7'">
                            <div class="scope">
                                <el-select v-model="formData.bsmp" style="width:150px" class="m-2" placeholder="请选择部门"
                                    >
                                    <el-option v-for="item in departmenData" :key="item.value" :label="item.deptName"
                                        :value="item" />
                                </el-select>
                                <p>部门内的角色</p>
                                <el-button type="primary" size="default" :icon="Plus" @click="specifiedMember({positioning:'E'})">添加成员</el-button>
                            </div>
                            <div class="alert-s">
                                <el-alert v-for="(item,index) in formData.grtye" :title="item.name" type="success" @close="deleMemberB(item)" />
                            </div>
                        </div>
                        <div class="tion" v-else-if="formData.members==='8'">
                            <el-button type="primary" size="default" :icon="Plus" @click="specifiedMember({positioning:'F'})">添加角色</el-button>
                            <div class="alert-s">
                                <el-alert v-for="(item,index) in formData.addRole" :title="item.name" type="success" @close="deleMemberB(item)" />
                            </div>
                            <p class="shr top"></p>
                        </div>
                        <div class="tion" v-else-if="formData.members==='9'">
                            <span class="ge">发起人自己将作为审批人处理审批单</span>
                            <p class="shr top"></p>
                        </div>
                        <div class="tion" v-else-if="formData.members==='0'">
                          <el-select v-model="formData.scontacttype" style="width:150px" class="m-2" placeholder="Select" size="default">
                            <el-option label="人员" :value="1" />
                            <el-option label="部门" :value="2" />
                            <el-option label="供应商" :value="9" />
                          </el-select>
                            <el-select v-model="formData.scontact" style="width:150px" class="m-2" placeholder="Select" size="default">
                                  <el-option v-for="item in mainFields" :key="item.fieldID"  :label="item.fieldDispName" :value="item.fieldName" />
                              </el-select>
                            <p class="shr top"></p>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="表单操作权限" name="first2">
                        <div class="fields">
                            <div class="fieldst">默认选项：
                                <el-radio-group v-model="formData.fieldstatus" class="ml-4">
                                    <el-radio label="0" size="large">只读</el-radio>
                                    <el-radio label="1" size="large">可编辑</el-radio>
                                    <el-radio label="2" size="large">隐藏</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="fieldst">可编辑字段：
                                <el-select v-model="formData.editor" placeholder="请选择" multiple size="small">
                                    <el-option-group v-for="group in tabDatasxmw" :key="group.tableID"
                                        :label="group.tableDispName">
                                        <el-option v-for="item in group.Fields" :key="item.fieldID"
                                            :label="item.fieldDispName" :value="group.tableName+'.'+item.fieldName" />
                                    </el-option-group>
                                </el-select>
                            </div>
                            <div class="fieldst">隐藏字段：
                                <el-select v-model="formData.hidden" placeholder="请选择" multiple size="small">
                                    <el-option-group v-for="group in tabDatasxmw" :key="group.tableID"
                                        :label="group.tableDispName">
                                        <el-option v-for="item in group.Fields" :key="item.fieldID"
                                            :label="item.fieldDispName" :value="group.tableName+'.'+item.fieldName" />
                                    </el-option-group>
                                </el-select>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="高级设置" name="first3">
                      {{tabDatasxm}}
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="demo-drawer__footer clear" style="margin-left: 10px;">
                <el-button type="primary" @click="saveApprover">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
        </el-drawer>
        <el-dialog v-model="dialogVisible" :title="tagzyf=='C'||tagzyf=='D'?'选定角色':'选定成员'" width="47%" :before-close="handleClose">
            <emplteedog @submitsxm="saveMembers" @sxdown="(val)=>{dialogVisible=val}"></emplteedog>
        </el-dialog>
    </div>
</template>
<script>
    import { computed, reactive, ref, watch ,toRefs,onMounted} from 'vue'
    import { useStore } from '/@/store/index';
    import { Plus } from '@element-plus/icons-vue'
    import XEUtils from 'xe-utils'
    import { ElMessageBox } from 'element-plus'
    import emplteedog from "../dialog/employeesDialog.vue"
    import {getDeptTree} from '/@/api/system/user/index';
    import {getDeptList} from "/@/api/system/dept";
    import {deleteRole, getRoleList} from "/@/api/system/role";
    import {getUserList} from '/@/api/system/user/index';
    import {getWorkFlowUsers} from "/@/api/linkoo/workflow";

    export default {
        props: ['directorMaxLevel', 'tabDatasxm'],
        emits: ["update:nodeConfig"],
        components:{
            emplteedog
        },
        setup(props, ctx) {
            const store = useStore()
            let tabDatasxmw = ref(null)
            let tablemember = ref(null)
            let departmenData=ref([])
            let mainFields=ref([])
            let specifiedMembert=ref([])
            let tagzyf = ref('A')
            let tableData2 = ref([])
            let state = reactive({
                formData:{
                    automaticType:'1',
                    editor:[],
                    members:null,
                    specifiedMember:[],
                    addMembers:[],
                    membersRange:[],
                    examinationend:null,
                    continuous:[],
                    Upa:false,
                    Uplevel:null,
                    originatorout:1,
                    Ass:false,
                    grtye:[],
                    addRole:[],
                    scontact:null,
                    scontacttype:0
                },
                yuan:{}
            })
            onMounted(()=>{
              getWorkFlowUsers().then((res)=>{
                    departmenData.value=res.data.deptList
                })
            })
            const dialogVisible = ref(false)
            let activeName = ref('first1')
            watch(()=>{return store.state.form.approverConfig},(val)=>{
                state.formData=val.value
                //console.log(state.formData);
            },{deep:true})
            watch(props, () => {
                tabDatasxmw.value = props.tabDatasxm
              mainFields.value = props.tabDatasxm.find(item=>item.tableType===0).Fields

            })
            watch(() => {
                return state.formData.editor
            }, (ovl, nvl) => {
                XEUtils.arrayEach(state.formData.editor, (item, key) => {
                    let sun = XEUtils.indexOf(state.formData.hidden, item)
                    sun === -1 ? '' : state.formData.hidden.splice(sun, 1)
                })
            },{deep:true})
            watch(() => {
                return state.formData.hidden
            }, (ovl, nvl) => {
            //    console.log(state.formData.editor)
                XEUtils.arrayEach(state.formData.hidden, (item, key) => {
                    let sun = XEUtils.indexOf(state.formData.editor, item)
                    sun === -1 ? '' : state.formData.editor.splice(sun, 1)
                })
            },{deep:true})
            const saveApprover = () => {
                // this.approverConfig.error = !this.$func.setApproverStr(state.formData.approverConfig)
                store.commit('setApproverConfig', {
                    value:state.formData,
                    flag:true,
                    id:state.formData.id
                })
                // ctx.emit("update:nodeConfig", state.form);
                closeDrawer()
            }
            const closeDrawer = () => {
                store.commit('setApprover', false)
            }
            //   打开弹窗
            const specifiedMember = ({positioning}) => {
                console.log(positioning);
                if(positioning==='A'){
                    tagzyf.value= 'A'
                    dialogVisible.value = true
                }else if(positioning==='B'){
                    tagzyf.value= 'B'
                    dialogVisible.value = true
                }else if(positioning==='C'){
                    tagzyf.value= 'C'
                    dialogVisible.value = true
                }else if(positioning==='D'){
                    tagzyf.value= 'D'
                    dialogVisible.value = true
                }else if(positioning==='E'){
                    tagzyf.value= 'E'
                    dialogVisible.value = true
                }else if(positioning==='F'){
                    tagzyf.value= 'F'
                    dialogVisible.value = true
                }
            }
            //   弹窗阴影关闭
            const handleClose = () => {
                dialogVisible.value = false
                getDeptTree().then((res)=>{
                    console.log(res);
                })
            }
            // 成员被选中
            const memberList=({row})=>{
                if(!XEUtils.includes(specifiedMembert.value, row)){
                    specifiedMembert.value.push(row)
                }
                tablemember.value.loadData(specifiedMembert.value)
            }
            // 删除选中成员
            const removemember =({row})=>{
                specifiedMembert.value.forEach((res,index)=>{
                    if(res===row){
                        specifiedMembert.value.splice(index,1)
                    }
                })
                tablemember.value.loadData(specifiedMembert.value)
            }
            // 确定后删除成员
            const deleMember = (ent)=>{
                XEUtils.remove(state.formData.addMembers, item => item === ent)
                console.log(state.formData.addMembers);
            }
            const deleMemberB = (ent)=>{
                XEUtils.remove(state.formData.membersRange, item => item === ent)
                console.log(state.formData.membersRange);
            }
            // 确定成员
            const saveMembers =(val,arr)=>{
                switch (tagzyf.value) {
                    case 'A':
                        state.formData.addMembers=arr
                        dialogVisible.value=false
                        break;
                    case "B":
                        state.formData.membersRange=arr
                        dialogVisible.value=false
                        break;
                    case "C":
                        state.formData.membersRange=arr
                        dialogVisible.value=false
                        break;
                    case 'D':
                        state.formData.continuous=arr
                        dialogVisible.value=false
                        break;
                    case 'E':
                        state.formData.grtye=arr
                        dialogVisible.value=false
                        break;
                    case 'F':
                        state.formData.addRole=arr
                        dialogVisible.value=false
                        break;
                }
                
            }
            return {
                store,
                activeName,
                tabDatasxmw,
                tablemember,
                Plus,
                dialogVisible,
                tableData2,
                specifiedMembert,
                departmenData,
                tagzyf,
                mainFields,
                ...toRefs(state),
                options: [{ value: "1", label: "自选一个人" }, { value: "2", label: "自选多个人" }],
                options2: [{ value: "1", label: "指定成员" }, { value: "2", label: "角色" }],
                options3: [{ value: "1", label: "第一级主管" }, { value: "2", label: "第二级主管" }, { value: "3", label: "第三级主管" }],
                saveApprover,
                closeDrawer,
                specifiedMember,
                handleClose,
                memberList,
                removemember,
                saveMembers,
                deleMember,
                deleMemberB
            }
        }
    }
</script>
<style lang="scss">
    .demo-drawer__content {
        padding: 10px;
    }

    .scope {
        display: flex;
        align-items: center;
    }

    .ge {
        margin-left: 10px;
    }

    .top {
        margin: 8px 0 5px 0;
    }

    .shr {
        border-top: 1px solid #d1d1d1b4;
    }

    .tion .el-radio-group {
        display: block;
    }

    .fields {
        height: 400px;
    }

    .fieldst {
        margin: 0 0 10px 0;
    }
    .demo-drawer__footery{
        text-align: right;
        margin-top: 10px;
    }
    .alert-s{
        margin: 5px;
        display: flex;
        flex-wrap: wrap;
    }
    .el-alert{
        width: 120px;
        margin-right: 10px;
        padding: 7px;
    }
</style>